<template>
  <div class="wrap">
    <van-nav-bar title="课程收藏"
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft">
      <template #left>
        <van-icon name="arrow-left"
                  size="18" />
      </template>
    </van-nav-bar>

    <div class="course-list">
      <div class="course-wrap"
           v-for="item in data.courseList"
           :key="item">
        <div class="image">
          <img :src="item.image" />
        </div>
        <div class="text">
          <div class="title">{{ item.title }}</div>
          <div class="teacher">讲师：{{ item.teacher }}</div>
        </div>
        <van-icon class="right-arrow"
                  name="arrow-down"
                  color="#87d4eb" />
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, getCurrentInstance } from 'vue'
export default {
  setup () {
    const { ctx, proxy } = getCurrentInstance()
    const state = reactive({})
    const data = reactive({
      courseList: [
        {
          image: '/src/assets/images/error.png',
          title: '海底探索',
          teacher: '海底小纵队',
          derectTo: '/Course/CourseInfo'
        }
      ]
    })
    function onClickLeft () {
      window.history.length > 1
        ? proxy.$router.go(-1)
        : proxy.$router.push('/search')
    }
    return {
      data,
      state,
      onClickLeft
    }
  }
}
</script>
<style lang='scss' scoped>
.wrap {
  .course-list {
    margin: 10px $margin-horizon;
    background-color: $theme-color3;
    border-radius: $border-radius;
    overflow: hidden;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
    .course-wrap {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      .image {
        img {
          width: 90px;
        }
      }
      .text {
        .title {
          padding-bottom: 15px;
        }
        .teacher {
          font-size: 10px;
        }
      }
      .right-arrow {
        line-height: 50px;
      }
    }
  }
}
</style>
